<template>
  <div class="footer_wrap">
    <dl
      class="footer_item"
      v-for="(item, index) in linkList"
      :key="index"
      @click="setActive(item)"
    >
      <dt>
        <van-icon
          :name="item.icon"
          :color="active == item.path ? '#ee0a24' : ''"
        />
      </dt>
      <dd>
        <router-link :to="item.path">{{ item.name }}</router-link>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "/home/index",
      linkList: [
        {
          path: "/home/shou",
          name: "首页",
          icon: "shop-o",
        },
        {
          path: "/home/shop",
          name: "购物车",
          icon: "cart-o",
        },
        {
          path: "/home/order",
          name: "我的",
          icon: "friends-o",
        },
      ],
    };
  },
  created() {},
  methods: {
    setActive(item) {
      this.active = item.path;
    },
  },
};
</script>

<style lang="scss" scoped>
.footer_wrap {
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  .footer_item {
    text-align: center;
    dd {
      margin: 0px;
      a {
        color: black;
      }
    }
  }
}
</style>